<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div th:include="front/common/cssjs :: main"></div>

    <div th:include="front/common/header :: main"></div>

    <div class="container">

        <div class="mt-3">
            <h4 class="text-center">购物车清单</h4>
            <div class="mt-3 mb-3">
                购物车id：<span id="porderId" th:text="${Porder.id}"></span>, &nbsp;&nbsp;&nbsp;&nbsp;
                时间：<span th:text="${#dates.format(Porder.date,'yyyy-MM-dd HH:mm:ss')}"></span>,&nbsp;&nbsp;&nbsp;&nbsp;
                状态码：<span th:text="${Porder.status}"></span>,&nbsp;&nbsp;&nbsp;&nbsp;
                总金额：<span id="total"></span>
            </div>

            <table class="table table-bordered">
                <tr><th>ID</th><th>商品id</th><th>商品名</th><th>数量</th><th>价格</th><th>操作</th></tr>
                <tbody id="detail">
                    <tr th:each="one:${DetailList}">
                        <td th:text="${one.id}"></td>
                        <td th:text="${one.productId}"></td>
                        <td th:text="${one.product.name}"></td>
                        <td>
                            <button th:onclick="minus(this, [[${one.productId}]])">-</button>
                            <input class="quantity" type="text" th:value="${one.quantity}" size="1">
                            <button th:onclick="add(this, [[${one.productId}]])">+</button>
                        </td>
                        <td class="price" th:text="${one.price}"></td>
                        <td><a th:href="'/cart/product/deleteShop?id=' + ${one.id}" class="btn btn-danger btn-sm">删除</a></td>
                    </tr>
                </tbody>
            </table>
            <a th:href="'commit?porderId=' + ${Porder.id}" class="btn btn-info">提交</a>
            <a th:href="@{/front/browse/product/list}" class="btn btn-info">商品列表</a>
        </div>
    </div>

    <script>
        function minus(obj ,productId) {
            var father = $(obj).parent();
            var original = parseInt(father.find("input").val());
            if(original>1){
                var target = original - 1;
                changeTo(father, productId, target);
            }
        }
        function add(obj, productId) {
            var father = $(obj).parent();                                  console.log(father);
            var original = parseInt(father.find("input").val());           console.log(original);
            var target = original + 1;                                     console.log(target);
            changeTo(father, productId, target);
        }
        function changeTo(father, productId, target) {
            console.log("目标数量target=" + target);
            var porderId = $("#porderId").text();   //拿到购物车号 
            $.ajax({
                url:"changeQuantity",
                data:{
                    'porderId': porderId,
                    'productId': productId,
                    'target': target
                },
                success: function (data) {
                    if(data=='ok'){
                        father.find("input").val(target);
                        setTotal();
                    }
                    else{ alert("修改失败");}
                }
            });
            
        }
    </script>
    <script>
        //计算总金额
        function setTotal() {
            var total = 0;
            $("#detail tr").each(  function(){
                var quantity = $(this).find(".quantity").val(); //数量
                var price = $(this).find(".price").text();  //价格
                total = total + quantity * price;
            });
            $("#total").text(total);
        }

        $(function(){
            setTotal();
        })
    </script>
    <script>
        function del(id) {
            if(confirm("你真的要删除吗？") ){
                $.ajax({
                    url:"/cart/product/deleteShop",
                    data:{
                        id:id
                    },
                    success:function (data) {
                        if(data=='ok') location.reload();
                        else alert("删除失败");
                    }
                });
            }
        }
    </script>
</body>
</html>